@extends('admin.common.common')

@section('head')

    <link rel="stylesheet" href="/webuploade/webuploader.css">
@endsection


@section('body')

    <article class="page-container">
        <form action="{{ route('admin.fang.store') }}" method="post" class="form form-horizontal" id="fang-add">
            @csrf
            @if ($errors->any())
                <div class="Huialert-error Huialert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房源名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="fang_name">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小区名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="fang_xiaoqu">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小区地址：</label>
                <div class="formControls col-xs-4 col-sm-4">
                    <select name="fang_province" style="width: 100px;" onchange="citychange(this,'fang_city')">
                        <option value="0">==请选择省==</option>
                        @foreach($cityData as $val)
                            <option value="{{$val->id}}">{{$val->name}}</option>
                        @endforeach
                    </select>
                    <select name="fang_city" id="fang_city" style="width: 100px;" onchange="citychange(this,'fang_region')">
                        <option value="0">==市==</option>

                    </select>
                    <select name="fang_region" id="fang_region" style="width: 100px;">
                        <option value="0">==区/县==</option>

                    </select>
                </div>
                <div class="formControls col-xs-4 col-sm-5">
                    <input type="text" class="input-text" name="fang_addr" placeholder="小区详情地址和房源说明">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租金：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" style="width: 200px;" name="fang_rent"> 元
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>楼层：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" style="width: 200px;" name="fang_floor">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租期方式：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="fang_rent_type" style="width: 200px;">
                        <option value="0">==请选择==</option>
                        @foreach($fangRentType as $val)
                            <option value="{{$val->id}}">{{$val->name}}</option>
                        @endforeach

                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几室：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_shi" value="2">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几厅：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_ting" value="1">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几卫：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_wei" value="2">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>朝向：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="fang_direction" style="width: 200px;">
                        <option value="0">==请选择==</option>
                        @foreach($fangDirection as $val)
                            <option value="{{$val->id}}">{{$val->name}}</option>
                        @endforeach

                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租赁方式：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="fang_rent_class" style="width: 200px;">
                        <option value="0">==请选择==</option>
                        @foreach($fangRentClass as $val)
                            <option value="{{$val->id}}">{{$val->name}}</option>
                        @endforeach

                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>建筑面积：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_build_area" value="120" style="width: 60px;">平米
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>使用面积：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_using_area" value="105" style="width: 60px;">平米
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>建筑年代：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" onfocus="WdatePicker({dateFmt:'yyyy'})" name="fang_year" class="input-text Wdate"
                           style="width:120px;">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>配套设施：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    @foreach($fangConfig as $val)
                        <input type="checkbox" name="fang_config[]" value="{{$val->id}}">{{$val->name}}
                    @endforeach

                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房源图片：</label>
                <div class="formControls col-xs-2 col-sm-2">
                    <div id="picker">房源图片</div>
                </div>
                <div class="formControls col-xs-6 col-sm-7">
                    <!-- 表单提交时，上传图片地址，以#隔开 -->
                    <input type="hidden" name="fang_pic" id="pic"/>
                    <!-- 显示上传成功后的图片容器 -->
                    <div id="imgList"></div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房东：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="fang_owner" style="width: 200px;">
                        <option value="0">==请选择==</option>
                        @foreach($fangowner as $val)
                            <option value="{{$val->id}}">{{$val->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否推荐：</label>
                <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <label>
                            <input name="is_recommend" type="radio" value="0" checked>
                            否
                        </label>
                    </div>
                    <div class="radio-box">
                        <label>
                            <input type="radio" value="1" name="is_recommend">
                            是
                        </label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房源状态：</label>
                <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <label>
                            <input name="fang_status" type="radio" value="0" checked>
                            已出租
                        </label>
                    </div>
                    <div class="radio-box">
                        <label>
                            <input type="radio" value="1" name="fang_status">
                            未出租
                        </label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋描述：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea name="fang_desn" id="fang_desn" class="form-control textarea"></textarea>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋详情：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea id="fang_body" name="fang_body"></textarea>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="添加房源">
                </div>
            </div>
        </form>
    </article>
@endsection


@section('js')

    <script src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script src="/ueditor/ueditor.config.js"></script>
    <script src="/ueditor/ueditor.all.js"></script>
    <script src="/webuploade/webuploader.js"></script>

    <script>
        //富文本
        $ue = UE.getEditor('fang_body');

        //图片异步上传
        var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,

            // swf文件路径
            swf: '/webuploade/Uploader.swf',

            formData:{_token:"{{csrf_token()}}"},
            method:"post",
            // 文件接收服务端。
            server: '{{route('admin.fang.localfile')}}',

            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id:'#picker',
                //是否开启多个文件的能力
                multiple:true,
            },

        });
        //上传成功回调
        uploader.on('uploadSuccess',function (res,pic) {
            // console.log(pic.data.pic);
            var pic = pic.data.pic; //图片路径
            var val = $('#pic').val() //隐藏域的val值
            var tmp = val + '#' + pic   //val值拼接

            $('#pic').val(tmp) //把值赋值给隐藏域

            var img = `
                        <div style="position: relative;width:150px; display: inline-block">
                        <img src="${pic}" width="150" height="150">
                        <strong onclick="delpic(this,'${pic}')" style="position: absolute;right: 0px; top: 0px;color: white;font-size: 20px;">x</strong>
</div>`

            $('#imgList').append(img) //追加图片到div
        })
        /**
         * 删除添加图片
         * @param res
         * @param pic
         */
        function delpic(res,pic){
            $(res).parent().remove();//移除当前图片
            var picVal = $('#pic').val()  //获取当前隐藏域的值
            var val = picVal.replace(`#${pic}`,''); //当前图片路径复制为空

            $('#pic').val(val) //重新给隐藏域赋值

            //Ajax请求
            $.ajax({
                url:"{{route('admin.fang.delpic')}}",
                data:{pic:pic,_token:"{{csrf_token()}}"},
                type:'delete',
                success:res=>{
                    if(res.error_code == 0){
                        layer.msg(res.msg,{icon:1,time:1000})
                    }else{
                        layer.msg(res.msg,{icon:5,time:1000})
                    }
                }
            })


        }

        /**
         * 多级联动
         * @param obj
         * @param cityname
         */
        function citychange(obj,cityname) {
            let pid = $(obj).val()
            let url = "{{route('admin.city')}}"+"?id=" + pid
            $.get(url,function (res) {
                let data = res.data.data
                let html = `<option value="0">==请选择</option>`
                data.map(function (item) {
                    html = html + `<option value="${item.id}">${item.name}</option>`
                })
                $(`#${cityname}`).html(html)
            })

        }

    </script>
@endsection
